<script setup lang="ts">
import { message } from 'ant-design-vue'
import Request from '@/api/axios'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { onMounted, ref } from 'vue'

const newFriendShip_Apply = ref<any[]>([])
const newFriendShip_Receive = ref<any[]>([])
const loading = ref(false)

// 处理好友申请操作
const handleRequest = async (id: number, status: 'accepted' | 'rejected') => {
    loading.value = true
    await Request.get({
        url: `/user/handle?apply_id=${id}&status=${status}`,
    }).then((res) => {
        message.success('操作成功')
    }).catch((err) => {
        message.error('操作失败')
        console.log(err)
    }).finally(() => {
        loading.value = false
    })
}
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
onMounted(async () => {
    await Request.get({ url: '/user/newfriend' }).then((res) => {
        newFriendShip_Apply.value = res.info.filter(item => item.is_sender === true)
        newFriendShip_Receive.value = res.info.filter(item => item.is_sender === false)
    })
})
</script>

<template>
    <div class="friend-request-container">
        <a-list v-if="newFriendShip_Receive.length > 0" class="request-list" item-layout="horizontal"
            :data-source="newFriendShip_Receive">
            <template #header>
                <div class="list-header">待处理申请</div>
            </template>
            <template #renderItem="{ item }">
                <a-list-item class="request-item">
                    <div class="user-info">
                        <a-row>
                            <a-col :span="8">
                                <a-avatar :src="item.avatar || defaultAvatar" />
                            </a-col>
                            <a-col :span="8">
                                <div class="name-row">
                                    <span class="name">{{ item.username }}</span>
                                </div>
                            </a-col>
                        </a-row>
                        <div class="meta">
                            <div class="message">{{ item.verification }}</div>
                        </div>
                    </div>
                    <div class="actions">
                        <a-button-group>
                            <a-button type="primary" size="small" @click="handleRequest(item.id, 'accepted')">
                                <CheckOutlined />
                            </a-button>
                            <a-button danger size="small" @click="handleRequest(item.id, 'rejected')">
                                <CloseOutlined />
                            </a-button>
                        </a-button-group>
                    </div>
                </a-list-item>
            </template>
        </a-list>
        <a-list v-if="newFriendShip_Apply.length > 0" class="request-list" item-layout="horizontal"
            :data-source="newFriendShip_Apply">
            <template #header>
                <div class="list-header">已发送申请</div>
            </template>
            <template #renderItem="{ item }">
                <a-list-item class="request-item sent">
                    <div class="user-info">
                        <a-row>
                            <a-col :span="8">
                                <a-avatar :src="item.avatar || defaultAvatar" />
                            </a-col>
                            <a-col :span="8">
                                <div class="name-row">
                                    <span class="name">{{ item.username }}</span>
                                </div>
                            </a-col>
                            <a-col :span="8">
                                <div class="status" :class="item.status">
                                    {{ item.status === 'pending' ? '等待验证' : '已通过' }}
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </a-list-item>
            </template>
        </a-list>

        <!-- 空状态 -->
        <a-empty v-if="!newFriendShip_Receive.length && !newFriendShip_Apply.length" description="暂无好友申请"
            class="empty-state" />
    </div>
</template>

<style scoped>
/* 保持原有悬停效果和颜色定义不变 */
.request-list {
    background: transparent;
}

.list-header {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.request-item {
    padding: 8px 0 !important;
    border-bottom: none !important;
}

.user-info {
    flex-grow: 1;
    min-width: 0;
    /* 允许内容截断 */
}

.name-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-id {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.actions {
    flex-shrink: 0;
    margin-left: 12px;
}

/* 紧凑按钮样式 */
.ant-btn-sm {
    height: 24px;
    padding: 0 8px;
}

.empty-state {
    padding: 16px 0;
}
</style>